<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>国际游学</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/school.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="content">
			<div class="banner" id="banner" v-cloak>
				<div>
					<img v-for="banners in banner_all.banner_pics" v-bind:src="banners" />
				</div>
				<div class="spot">
					<ul>
						<li v-for="banners in banner_all.banner_pics"></li>
					</ul>
				</div>
			</div>
			<div class="menu">
				<div class="menu_act" @click="choice(0)">留学项目</div>
				<div @click="choice(1)">游学项目</div>
				<div @click="choice(2)">板鸭宝典</div>
			</div>
			<div class="content" v-cloak>
				<div class="content_overseas" id="content_0">
					<div v-for="list in article_all">
						<a :href="'article' + '.html?id='+ list.article_id">
							<div>
								<div>
									<img v-bind:src="list.article_pic" alt=" " />
								</div>
								<div class="text">
									<p>{{list.article_title}}</p>
									<p v-html="list.article_desc"></p>
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var data = {
				index: 0,
				article_all: {},
				banner_all: {}
			};
			var app = new Vue({
				el: '#content',
				data: data,
				methods: {
					init: function() {
						var self = this;
						self.getList();
						self.getBanner()
					},
					getList: function() {
						var self = this;
						//调用列表接口
						$.ajax({
							url: apiPath + 'article/get-list',
							type: 'post',
							dataType: 'json',
							data: {
								article_type: 3,
								extend_type: self.index,
								flagsign: 1
							},
							success: function(data) {
								self.article_all = data.returnData
								console.log(self.article_all)
							}
						});
					},
					getBanner: function() {
						var self = this;
						//调用轮播图接口,国际游学
						$.ajax({
							url: apiPath + 'common/banner',
							type: 'post',
							dataType: 'json',
							data: {
								banner_type: 2,
								flagsign: 1
							},
							success: function(data) {
								self.banner_all = data.returnData
							}
						});
					},
					choice: function(index) {
						var self = this;
						$(".menu>div").removeClass('menu_act');
						$(".menu>div").eq(index).addClass('menu_act');
						self.index = index;
						self.getList()
					}
				},
				mounted: function() {
					var index = 0;
					var self = this;

					function play(index) {
						// 大图切换 ：大图显示，其余的大图隐藏（当前元素的前后兄弟元素隐藏）
						$(".banner>div img").eq(index).show().siblings('img').hide();
					}

					// 自动播放
					function autoPlay() {
						//创建定时器，每一毫米调用一次play()
						timer = setInterval(function() {
							//下一张 索引值++
							index++;
							//边界判断 索引值=10，重新赋值
							index = index % self.banner_all.banner_pics.length;
							//调用play()
							play(index);
						}, 2000);
						//		console.log(timer);

					};
					// 启动自动播放
					autoPlay();
				}
			});
			app.init()
		</script>
	</body>

</html>